<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>HTML与jsm转换</title>

	<meta name="keywords" content="JS,Coro,转换,在线">
    <meta name="description" content="JS,Coro,转换,在线">

	<script src="lib/Query.js"></script>
	<script src="lib/Coro.js"></script>

	<style>
		#txt{
			font-size:16px; border:none; outline:none
		}

		#btn, #btn2{
			background-color:#108cee; border:none; color:white; transition:background 0.3s; font-size:24px; height:50px; width:100%; line-height:50px; text-align:center; cursor:default;
			-webkit-touch-callout: none;
			-webkit-user-select: none;
			-moz-user-select: none;
			-ms-user-select: none;
			user-select: none;
		}

		#btn:hover, #btn2:hover{
			background-color:#46adff;
		}

		#btn:active, #btn2:active{
			background-color:#035ba0;
		}
	</style>
	<script>
		var btn_OnClick = function(){
			$("#loading").fadeIn(function(){
				coro.run(function*(){
					return yield* coro.parse($("#txt").val());
				}).then(function(data){
					console.log(arguments);
					$("#loading").fadeOut();
					setTimeout(function(){
						$("#txt").val(data);
					},300);
				});
			});
		}

		var btn2_OnClick = function(){
			$("#loading").fadeIn(function(){
				$.ajax({                    
					type: "POST",                     
					url: "jsmToHTML.aspx/",
					data: {data:$("#txt").val()},
					success: function(data) {
						$("#loading").fadeOut();
						setTimeout(function(){ $("#txt").val(data); },300);
					}               
				});
			});
		}
	</script>
</head>
<body style="background-color:#e2e5ec; font-family:幼圆">
    <form id="form1" style="position:absolute; left:5px; top:5px; right:5px; bottom:5px;">
		<div style="position:absolute; top:0; right:0; left:0; bottom:30%; background-color:white;">
			<div style="position:absolute; top:10px; right:10px; left:10px; bottom:70px;">
				<textarea style="width:100%; height:100%" ID="txt" onmouseenter="this.select()" onmouseleave="this.blur()">console.log("hello world");</textarea>
			</div>
			<div style="position:absolute; bottom:10px; height:50px; left:10px; right:10px; display:flex;">
				<div id="btn" style="flex:1 0 0" onclick="btn_OnClick()">js转coro</div>
				<div style="width:5px;"></div>
				<div id="btn2" style="flex:1 0 0; background:#888" onclick="alert('等待实现支持')">coro转js</div>
			</div>
		</div>

    </form>

	<div style="position:absolute; left:0; right:0; bottom:0; text-align:center; font-size:18px; line-height:38px; background-color:#f6f7fb; height:170px; color:#424345;">
		<table cellpadding="0" cellspacing="0" width="100%">
		<tr>
			<td align="center">
				<table cellpadding="0" cellspacing="0" style="white-space:nowrap; margin-top:10px; text-align:center">
					<tr>
						<td style="padding-right:20px">
							<div>学习更多技术工具</div>
							<div>关注远方你怎么看</div>
						</td>
						<td>
							<img src="Image/qrcode.jpg" width="150" height="150" />
						</td>
						<td style="padding-left:50px; padding-right:20px; line-height:30px">
							<div>扫码或搜微信号</div>
							<div>yanfant-com</div>
							<div>与远方私密问答</div>
						</td>
						<td>
							<img src="Image/my_qrcode.jpg" width="150" height="150" />
						</td>
					</tr>
				</table>
			</td>
		</tr>
		</table>
	</div>

	<div id="loading" style="position:absolute; left:0; top:0; width:100%; height:100%; background-color:rgba(255,255,255,0.3); display:none;">
		<div style="position:absolute; left:0; top:0; width:100%; height:100%; background:url('Image/Loading.gif') no-repeat center;"></div>
	</div>
</body>
</html>